<template>
    <el-dialog v-model="visible" v-bind="$attrs" :modal="props.modal" modal-class="modal-class" :before-close="closeChange"
        :close-on-click-modal="props.closeOnClickModal" :width="props.width" :show-close="props.showClose"
        :draggable="props.draggable" :title="props.title" :center="props.center" @close="popupClose"
        :style="{ '--height': props.height }">
        <template #header="{ close, titleId, titleClass }">
            <div class="dialog-header">
                <h4 :id="titleId" :class="titleClass">{{ props.title }}</h4>
                <div @click="fullScreenChange" style="cursor: pointer;font-size: 18px;margin-top: 5px;color: #666;"
                    v-if="props.showFullScreen">
                    <el-tooltip effect="dark" content="全屏/取消全屏" placement="left">
                        <el-icon>
                            <FullScreen />
                        </el-icon></el-tooltip>
                </div>
            </div>
        </template>
        <div class="dialog-conetnt">
            <div class="dialog-body">
                <slot />
            </div>
            <div class="dialog-footer" :style="[styleObj]" v-if="props.showFooter">
                <el-button @click="closeChange" size="default">{{ cancelText }}</el-button>
                <slot name="footer" v-if="props.showConfirm">
                    <el-button type="primary" @click="handleOk" :loading="loading" :disabled="loading" size="default">{{
                        confirmText }}</el-button>
                </slot>
            </div>
            <!-- 加载中动画 -->
            <div class="dialog-loading" :style="[{ zIndex: loading ? 999 : -1 }, { opacity: loading ? 1 : 0 }]">
                <el-icon class="is-loading" style="font-size: 2rem;
    color: #3572e5;">
                    <Loading />
                </el-icon>
                <div class="loading-text">{{ loadingText }}</div>
            </div>
        </div>
    </el-dialog>
</template>
   
<script setup>
import { Setting, Search, Refresh, FullScreen, Rank } from '@element-plus/icons-vue'
import useScreenFull from '@/hooks/useScreenFull.js';//引入方法
const { isFull, fullScreen } = useScreenFull('.el-dialog');// 全屏

const emit = defineEmits(["close", "confirm", 'update:modelValue']);
const props = defineProps({
    visible: {
        type: Boolean,
        default: false,
    },
    //为 Dialog 启用可拖拽功能
    draggable: {
        type: Boolean,
        default: true
    },
    // 是否需要遮罩层
    modal: {
        type: Boolean,
        default: true
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
        type: Boolean,
        default: false
    },
    // 是否显示右上角关闭图标
    showClose: {
        type: Boolean,
        default: true
    },

    // 弹窗标题
    title: {
        type: String,
        default: "弹框标题"
    },
    //弹窗 宽度
    width: {
        type: String,
        default: "70%"
    },
    // 高度
    height: {
        type: String,
        default: "80%"
    },

    // 标题是否居中
    center: {
        type: Boolean,
        default: false
    },
    // 是否显示关闭按钮
    showClose: {
        type: Boolean,
        default: true
    },
    // 是否全屏
    showFullScreen: {
        type: Boolean,
        default: true
    },

    // 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序
    zIndex: {
        type: Number,
        default: 1000
    },
    // 是否显示加载中动画  同时也是禁用  开启则出现加载动画   提交表单需要
    loading: {
        type: Boolean,
        default: false
    },
    // 加载提示文字
    loadingText: {
        type: String,
        default: "加载中..."
    },

    // 是否显示确认按钮
    showConfirm: {
        type: Boolean,
        default: false
    },

    // 取消按钮文字
    cancelText: {
        type: String,
        default: "关闭"
    },
    // 确认按钮文字
    confirmText: {
        type: String,
        default: "确定"
    },
    // 是否显示底部按钮
    showFooter: {
        type: Boolean,
        default: false
    },
    // 底部按钮对齐方向
    footerAlign: {
        type: String,
        default: "right"
    },
})

const styleObj = ref({})//底部按钮对齐样式
// 设置底部按钮对齐方向
watch(() => props.footerAlign, (val) => {
    switch (val) {
        case 'left': // 左对齐
            styleObj.value = {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-start'
            }
            break;
        case 'right':// 右对齐
            styleObj.value = {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'flex-end'
            }
            break;
        case 'center'://居中对齐
            styleObj.value = {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
            }
            break;
    }
}, {
    deep: true,
    immediate: true
})


// 子组件定义自己的visible
const visible = computed({
    get: () => props.visible,
    set: (value) => {
        emit('update:modelValue', value)
    },
})

// 确认按钮
const handleOk = () => {
    emit("confirm");
}
// 关闭按钮
const closeChange = () => {
    if (isFull.value) {
        fullScreen()
    }
    emit("close");
    visible.value = false
}

// 弹窗关闭时回调
const popupClose = () => {
    console.log('弹窗关闭了')
}

// 全屏方法
function fullScreenChange() {
    fullScreen()
}

</script>
<style lang="scss" scoped>
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-right: 40px;
    box-sizing: border-box;
}

.dialog-conetnt {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;


    .dialog-body {
        flex: 1;
        // overflow-y: scroll;
        overflow: auto;
        overflow-x: hidden;
    }

    .dialog-footer {
        //padding: 0 20px;
        box-sizing: border-box;
    }

    .dialog-loading {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        transition: 0.5s;

        .loading-text {
            margin-top: 6px;
        }
    }

    // 隐藏滚动条

    // .dialog-body::-webkit-scrollbar {
    //     width: 0px !important;
    //     height: 0px;
    // }

    .dialog-body::-webkit-scrollbar {
        width: 6px; //修改滚动条宽度
    }

    .dialog-body::-webkit-scrollbar-thumb {
        border-radius: 6px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #eee;
    }

    // 上下箭头按钮高度
    .dialog-body::-webkit-scrollbar-button {
        height: 0;
    }

    //鼠标移入样式
    .dialog-body::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

    .dialog-body::-webkit-scrollbar-track {
        border-radius: 6px;
        background: #eee;
    }

    .dialog-body::-webkit-scrollbar-button {
        background: #eee;
    }

    .dialog-body::-webkit-scrollbar-corner {
        background-color: transparent;
    }

    //水平方向滚动条
    .dialog-body::-webkit-scrollbar:horizontal {
        width: 0;
    }

    //垂直方向滚动条
    .dialog-body::-webkit-scrollbar:vertical {
        width: 6px;
    }

}
</style>

<style lang="scss">
.modal-class {
    .el-overlay-dialog {
        display: flex;
        align-items: center;
        justify-content: center;

        .el-dialog {
            display: flex;
            flex-direction: column;
            height: var(--height);
            margin: 0 !important;
            border-radius: 5px;
            overflow: hidden;

            .el-dialog__header {
                margin-right: 0 !important;
                background: #eee;
                padding: 16px;
                box-sizing: border-box;
            }

            .el-dialog__body {
                flex: 1;
                display: flex;
                flex-direction: column;
                overflow-y: scroll;
                padding: 16px;
            }

            .el-dialog__body::-webkit-scrollbar {
                width: 0px;
                height: 0px;
            }
        }
    }

}
</style>